<template>
  <div class="classify_box_big">
    <div class="classify_center_left">
      <div class="classify_box">
        <div
          v-for="(item, index) in list"
          :key="index"
          :class="[i === index ? 'classify_left_xian' : '']"
          @click="onClick(index)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="classify_center_right">
      <div class="classify_right_box">
        <div v-for="(item, index) in list" :key="index" ref="rightitem">
          <div class="classify_index">{{ item.title }}</div>
          <div v-for="(rightitem, index) in item.children" :key="index">
            <div class="classify_right_tw">
              <img :src="rightitem.img" alt="" />
              <div class="classify_img_box">
                <p>{{ rightitem.title }}</p>
                <p class="price">{{ rightitem.price }}￥</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      //   listshop: [],
      i: 0,
    };
  },
  methods: {
    onClick(index) {
      this.i = index;
      console.log(1);
      let items = this.$refs.rightitem;
      console.log(items);
      let fjh = items[this.i];
      console.log(fjh);
      fjh.scrollIntoView({ behavior: "smooth" });
    },
  },
  mounted() {
    this.$axios.get("data.json").then((res) => {
      console.log(res);
      this.list = res.data.data;
      //   this.listshop = res.data.data
    });
  },
};
</script>

<style lang="scss">
.classify_box_big {
  width: 100%;
  height: 108.5vh;
  //   background-color: pink;
  display: flex;
  justify-content: space-between;
  .classify_center_left {
    width: 30%;
    height: 100%;
    // background-color: red;
    .classify_box {
      width: 100%;
      height: 100vh;
      div {
        width: 100%;
        height: 50px;
        font-size: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: skyblue;
        margin-top: 3px;
        color: white;
        // font-weight: 600;
      }
      .classify_left_xian {
        border-left: 1px solid red;
      }
    }
  }
  .classify_center_right {
    width: 70%;
    height: 100%;
    // background-color: slateblue;
    overflow: scroll;
    .classify_right_box {
      width: 100%;
      height: 100vh;
      .classify_index {
        width: 100%;
        height: 70px;
        background-color: red;
        text-align: center;
        line-height: 70px;
        color: white;
      }
      div {
        div {
          .classify_right_tw {
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            img {
              width: 30%;
              height: 80px;
            }
            .classify_img_box {
              width: 40%;
              height: 100%;
              p {
                line-height: 50px;
              }
              .price {
                line-height: 50px;
                color: red;
              }
            }
          }
        }
      }
    }
  }
}
</style>